var FontSizeInput = function () {
  var template = /* html */ `
    <div class="font-size-input">
      <el-input-number :class="inputClass" v-model="fontSize" :size="size" controls-position="right" :min="min" :max="max"
        :precision="precision" :after-change-format-value="formatFontSize" @change="handleChange"></el-input-number>
      <el-tooltip effect="light" placement="right" style="margin-left:10px;">
        <span>预览</span>
        <div slot="content" :style="{fontSize:fontSize+'px'}">
          {{previewText}}
        </div>
      </el-tooltip>
    </div>
  `;

  return {
    props: {
      value: {
        type: Number,
        required: true
      },
      size: String,
      inputClass: String,
      min: Number,
      max: Number,
      required: {
        type: Boolean,
        default: true
      },
      precision: {
        type: Number,
        default: 0
      },
      previewText: {
        type: String,
        default: '字号'
      }
    },

    watch: {
      value: function () {
        if (this.userInput !== null) {
          this.userInput = null;
        }
        this.fontSize = this.value;
      }
    },

    data: function () {
      return {
        userInput: null,
        fontSize: this.value
      };
    },

    methods: {
      handleChange: function () {
        var fontSize = this.fontSize;
        this.userInput = fontSize;
        this.$emit('input', fontSize);
        this.$emit('change', fontSize);
      },

      formatFontSize: function (value) {
        if (this.required) {
          return value !== undefined;
        }
        return true;
      }
    },

    template: template
  };
}();